<template>
	<navigatorComp :title="name" bgcColor="#121512" fontColor="#fff">
		<template #rightWrap>
			<view class="edit" @click="goUrl('/subPages/worship/practice_detail')">修行详情</view>
		</template>
	</navigatorComp>



	<image class="worship_detail_bgc" :src="detail.worshipPortrait" :style="{
			top: bgcTop + 'px',
			height: `calc(100% - ${bgcTop + 'px'})`,
			width: bgcWidth + 'px',
			Height: bgcHeight + 'px',
			transform: `translateX(${-bgcWidth / 2 + 'px'})`
		}" mode="aspectFill"></image>

	<view class="fixed_">
		<Bubble :list="detail.offeringRecordList" bgc="rgba(14, 14, 14, 0.6)" />
		<view class="bottom_funcList" :style="{ height: !isExpand ? '176rpx' : 'auto' }">
			<image v-if="!isExpand" class="img_contract" mode="" src="http://112.124.50.179:8888/imgs/worship/worship_detail_contract.png">
			</image>
			<image v-else class="img_expand" src="http://112.124.50.179:8888/imgs/worship/worship_detail_expand.png" mode="">
			</image>
			<view class="expandText" @click="isExpand = !isExpand">
				{{ isExpand ? '收起' : '展开更多' }}
				<up-icon name="arrow-down" color="#524630" size="15" style="margin-left: 4rpx"></up-icon>
			</view>
			<view class="funcList">
				<view class="funcItem" @click="koubaiRef.show = true">
					<image src="http://112.124.50.179:8888/imgs/worship/worship_func1.png" mode=""></image>
					<view class="funcItem_text">叩拜</view>
				</view>
				<view class="funcItem" @click="jingxiangRef.show = true">
					<image src="http://112.124.50.179:8888/imgs/worship/worship_func2.png" mode=""></image>
					<view class="funcItem_text">敬香</view>
				</view>
				<view class="funcItem" @click="oblationRef.show = true">
					<image src="http://112.124.50.179:8888/imgs/worship/worship_func3.png" mode=""></image>
					<view class="funcItem_text">供品</view>
				</view>
				<view class="funcItem" @click="qifuRef.show = true">
					<image src="http://112.124.50.179:8888/imgs/worship/worship_func4.png" mode=""></image>
					<view class="funcItem_text">祈福</view>
				</view>
			</view>
			<view class="worship_detail_content" v-if="isExpand">
				<view class="content_text">
					{{ detail.worshipPeopleTitle }}
				</view>
				<view class="content_birth">
					<image src="http://112.124.50.179:8888/imgs/worship/worship_birth.png" mode=""></image>
					圣诞日：{{toChineseCanlender(detail.lunarBirthday)}}
				</view>
			</view>
		</view>
	</view>

	<!-- 叩拜弹框 -->
	<koubai ref="koubaiRef" :peopleId="peopleId" @finish="getDetail"></koubai>

	<!-- 敬香弹框 -->
	<jingxiang ref="jingxiangRef" :peopleId="peopleId" @finish="getDetail"></jingxiang>

	<!-- 贡品弹框 -->
	<oblation ref="oblationRef" :peopleId="peopleId" @finish="getDetail" :offeringType='4' :titleTxt='"送取供品"' />

	<!-- 祈福弹框 -->
	<qifu ref="qifuRef" :peopleId="peopleId" @finish="getDetail" />
</template>

<script setup>
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import navigatorComp from '/components/navigator/index.vue';
	import koubai from './components/koubai.vue';
	import jingxiang from './components/jingxiang.vue';
	import oblation from '../home/common/oblation.vue';
	import qifu from './components/qifu.vue';
	import Bubble from '@/components/bubble/index.vue';
	import WorshipApi from '@/API/worship';
	import {
		toChineseCanlender
	} from '@/utils/time.js'
	const worshipApi = new WorshipApi();

	// #ifdef MP-WEIXIN
	const bgcTop = ref(getApp().globalData.navHeight); //背景色高度
	// #endif
	// #ifndef MP-WEIXIN
	const bgcTop = ref(getApp().globalData.navHeight + uni.upx2px(80)); //背景色高度
	// #endif

	const bgcWidth = document?.body.clientWidth || uni.getSystemInfoSync().screenWidth;
	const bgcHeight = document?.body.clientHeight || uni.getSystemInfoSync().screenHeight

	let scrollTop = ref(0); //滚动距离
	let scrollTimer = ref(null); //滚动定时器
	let scrollStartTime = ref(0); //滚动开始时间
	let scrollEndTimer = ref(null); //滚动结束延迟定时器
	let isAni = ref(true); //是否开启动画

	const isExpand = ref(false); //是否展开介绍
	const koubaiRef = ref();
	const jingxiangRef = ref();
	const oblationRef = ref();
	const qifuRef = ref();

	const name = ref();
	const peopleId = ref(); //祭拜id
	const detail = ref({
		worshipPortrait: ''
	}); //祭拜详情

	onLoad((options) => {
		peopleId.value = String(JSON.parse(options.item).peopleId);
		name.value = JSON.parse(options.item).peopleName;
		getDetail();
		if (options.item) {
			uni.setStorageSync('peopleId', JSON.parse(options.item).peopleId)
		}
	});

	const getDetail = () => {
		worshipApi.getWorshipPeopleInfo({
			worshipPeopleId: peopleId.value
		}).then((res) => {
			if (res.code === 0) {
				detail.value = res.data;
			}
		});
	};

	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};
</script>

<style lang="scss">
	page {
		background: none;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.edit {
		font-weight: 400;
		font-size: 32rpx;
		color: #f3e0bb;
		line-height: 32rpx;
		text-align: right;
	}

	.worship_detail_bgc {
		position: fixed;
		left: 50%;
		top: 0;
		z-index: -1;
	}

	.fixed_ {
		position: fixed;
		bottom: calc(constant(safe-area-inset-bottom));
		bottom: calc(env(safe-area-inset-bottom));
		left: 0;
		right: 0;
		padding: 24rpx 32rpx;
		z-index: 50;

		@media screen and (min-width: 992px) {
			width: 828rpx;
			margin: 0 auto;
			box-sizing: border-box;
		}

		.bottom_funcList {
			position: relative;
			width: 100%;
			min-height: 200rpx;
			overflow: hidden;
			border-radius: 60rpx;

			.img_contract {
				width: 100%;
				height: 200rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.img_expand {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.expandText {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 10rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #524630;
				line-height: 30rpx;
				display: flex;
				align-items: center;
			}

			.worship_detail_content {
				position: relative;
				margin: 12% 16rpx 135rpx;
				padding: 24rpx;
				box-sizing: border-box;
				background: #ffffff;
				border-radius: 24rpx;
				opacity: 0.8;

				.content_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: justify;
				}

				.content_birth {
					display: flex;
					align-items: center;
					margin-top: 12rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 30rpx;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 8rpx;
					}
				}
			}

			.funcList {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				position: absolute;
				bottom: 0;

				.funcItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					width: 144rpx;
					height: 144rpx;

					image {
						width: 144rpx;
						height: 144rpx;
					}

					.funcItem_text {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 0rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 42rpx;
						letter-spacing: 1px;
						text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
						text-stroke: 1px #a19dd1;
					}
				}
			}
		}
	}
</style>